<template>
  <div class="w-full h-full flex flex-col">
    <titleBar :showback="true">选座购票</titleBar>
    <div class="flex-1 overflow-auto">
      <!-- 电影的基本信息 -->
      <ul class=" leading-6 px-[5px]">
        <li class="font-bold flex items-end">
          <div>{{currentPlanInfo.movieInfo.movie_name}}</div>
          <div class=" text-warningColor text-[14px] ml-2">￥{{currentPlanInfo.price}}</div>
        </li>
        <li class="text-[12px] text-gray-500">
          {{new Date(currentPlanInfo.plan_time).toLocaleString()}}
        </li>
      </ul>
      <!-- 座位的基本信息 -->
      <ul class="text-[12px] flex justify-around py-[10px] border-0 border-b border-solid border-gray-300">
        <li class="flex items-center">
          <div class="w-[30px] h-[26px]  mr-2">
            <img src="../assets/img/00.png" alt="" />
          </div>
          可选
        </li>
        <li class="flex items-center">
          <div class="w-[30px] h-[26px]  mr-2">
            <img src="../assets/img/01.png" alt="" />
          </div>
          已售
        </li>
        <li class="flex items-center">
          <div class="w-[30px] h-[26px]  mr-2">
            <img src="../assets/img/02.png" alt="" />
          </div>
          已选
        </li>
      </ul>
      <!-- 屏幕的盒子 -->
      <div class="h-[10px] w-[60%] bg-gray-300 m-auto rounded-b-[10px]"></div>
      <!-- 下面的选坐购票 -->
      <ul class="overflow-auto py-[10px] mt-[10px]">
        <li class="flex items-center py-[2px]" v-for="(item1,index1) in siteList" :key="index1">
          <div class="text-[12px] text-center font-bold text-gray-500 w-[20px] flex-shrink-0">
            {{index1+1}}
          </div>
          <div class="w-[30px] h-[26px] mr-1 flex-shrink-0"
            v-for="(item2,index2) in item1" :key="index2"
            @click="siteClick(index1,index2)">
            <img src="../assets/img/00.png" alt="" v-if="item2==0" />
            <img src="../assets/img/01.png" alt="" v-else-if="item2==1" />
            <img src="../assets/img/02.png" alt="" v-else-if="item2==2" />
          </div>
        </li>
      </ul>
      <!-- 购票按钮 -->
      <div class="bg-primaryColor text-[14px] h-[32px] text-white 
                w-[80%] m-auto rounded-full flex justify-center items-center mt-[10px]">
        <span v-if="alter">￥{{sum}}</span><span v-if="!alter" >请先选座</span><span v-if="alter" >确认选座</span>
      </div>
      <!-- 已经选了的座位信息 -->
      <ul class="flex flex-wrap mt-[20px]">
        <li v-for="item in currentChoose" :key="item"
         class="m-[5px] w-[80px] bg-gray-100 text-[12px] h-[40px] flex justify-center items-center">
          {{item}}
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import titleBar from "../components/title-bar.vue";
import { ref, watch } from "vue";
import { Toast } from "vant";
import { useRoute, useRouter } from "vue-router";
import API from "../utils/API/index.js";
let baseURL = ref("http://www.softeem.xin:9999");
const route = useRoute();
//假设0代表可选，1代表已售，2代表已选   -1代表没有坐位
const siteList = ref([]);
//定义一个alter表示座位选择情况，初始值表示为选座！sum表示选择座位的总价
const alter=ref(false);
const sum=ref(0);
//坐位点击以后的效果
const siteClick = (index1, index2) => {
  if (siteList.value[index1][index2] == 0) {
    siteList.value[index1][index2] = 2;
    alter.value=true
    sum.value+=currentPlanInfo.value.price*1;
  } else if (siteList.value[index1][index2] == 2) {
    siteList.value[index1][index2] = 0;
    sum.value-=currentPlanInfo.value.price*1;
  } else if (siteList.value[index1][index2] == 1) {
    Toast("该座位已售");
  }
  else{
    Toast("该座位不可选");
  }
  console.log(sum)
};
//定义一个变量，用于保存当前选中的座位
const currentChoose = ref([]);
//监听siteList的变化
watch(siteList, (newVal, oldVal) => {
  //let定义的变量有push函数，ref定义的函数没有该函数，所以采用临时变量来存放值，最后再赋值
    let temp = [];
    newVal.forEach((item1,index1)=>{
        item1.forEach((item2,index2)=>{
            if(item2==2){
                temp.push("第"+(index1+1)+"排"+(index2+1)+"座");
            }
        });
    });
    if(temp.length==0){
      alter.value=false;
    }
    currentChoose.value = temp;
    
}, { deep: true });

//编写方法，从服务器获取数据
const currentPlanInfo=ref({});
const queryData =()=>{
    API.planInfo.findById(route.query.id).then(result=>{
        currentPlanInfo.value=result
        siteList.value=JSON.parse(result.choose_site)
    });
};
queryData();
</script>
<style scoped>
</style>